<template>
	<view class="cu-modal bottom-modal" :class="{ show: show }">
		<view class="cu-dialog">
			<view class="cu-bar bg-white">
				<view class="content">优惠券</view>
				<view class="action cuIcon-close" @tap="close"></view>
			</view>
			<view class="coupon-list" v-if="coupon.length">
				<view
					class="coupon-card cu-card case bg-white margin-bottom"
					v-for="(item, index) in coupon"
					@tap="getCouponUser(item, index)"
					:data-index="index"
					:data-id="item.discount_coupon_id"
					:key="index"
				>
					<view class="side">
						<!-- is_common 是否全场通用，0为否，1为是 -->
						<image v-if="item.is_common" src="../static/img/coupon/COUPON.png" style="height: 150px"></image>
						<image v-else src="../static/img/coupon/FULLCOUPON.png" style="height: 150px"></image>
					</view>
					<view class="content">
						<view class="introduction padding" :style="{ borderColor: item.is_common ? '#172575' : '#A5C3F7' }">
							<view class="left-wrap">
								<view class="text-bold">{{ item.type === 0 ? 'FULL COUPON' : 'LIMITED COUPON' }}</view>
								<!-- 判断优惠券类型 1:折扣 -->
								<view class="block" v-if="item.type">
									<text class="sign">￥</text>
									<text class="price">{{ item.discount || 8.8 }}</text>
									<text class="sub">折</text>
								</view>
								<!-- 判断优惠券类型 0:立减 -->
								<view class="block" v-else>
									<text class="sign">￥</text>
									<text class="price">{{ item.subtract_price || 8.8 }}</text>
									<text class="sub">立减</text>
								</view>
							</view>
							<view class="details">
								<view>{{ item.is_common ? '全平台通用优惠券' : '仅限' + item.area_name + '使用' }}</view>
							</view>
							<view class="text-gray text">{{ item.full_price > 0 ? `订单满${item.full_price}元使用` : '无门槛优惠券' }}</view>
						</view>
						<view class="range text-gray">
							<text class="padding-sm">使用时间: {{ item.commencement_date }} ~ {{ item.expiry_date }}</text>
						</view>
					</view>
					<view class="mark text-center" v-if="item.is_use">
						<view class="flex justify-center align-center text-sl padding" style="height: 100%;"><text class="cuIcon-roundcheckfill text-green"></text></view>
					</view>
				</view>
			</view>
			<!-- 无优惠券 -->
			<view class="pictrue" v-else><image src="/static/img/noCoupon.png"></image></view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		coupon: {
			type: Array,
			default: function() {
				return [];
			}
		},
		value: {},
		//打开状态 0=领取优惠券,1=使用优惠券
		openType: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			show: false
		};
	},
	watch: {
		value(value) {
			this.show = value;
		},
		show(value) {
			this.$emit('input', value);
		}
	},
	methods: {
		close() {
			this.show = false;
			this.$emit('changCouponsClone');
		},
		getCouponUser(item, index) {
			this.show = false;
			this.$emit('changCoupons', item, index);
		}
	}
};
</script>

<style lang="scss" scoped>
.coupon-list {
	margin: 0 0 50rpx 0;
	height: 800rpx;
	padding: 20px;
	overflow: auto;
}
.coupon-list .item {
	width: 100%;
	height: 170rpx;
	margin-bottom: 16rpx;
}

.pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 0 auto 50rpx auto;
}
.pictrue image {
	width: 100%;
	height: 100%;
}
.coupon-card {
	box-shadow: 7px 3px 15px 0px rgba(212, 212, 211, 0.54);
	border-radius: 10px;
	position: relative;
	.side {
		float: left;
		width: 3%;
		height: 150px;
	}

	.content {
		float: left;
		width: 97%;
		height: 150px;

		.introduction {
			height: 114px;
			border-bottom: 2px dotted #172575;
			position: relative;	
			.left-wrap {
				width: 60%;
				float: left;
				text-align: left;
				.price {
					font-size: 100rpx;
					margin-right: 10rpx;
					line-height: 130rpx;
					font-weight: 600;
				}
				.sign {
					font-size: 50rpx;
					font-weight: 600;
					margin-left: -9px;
				}
				.sub {
					font-size: 32rpx;
					position: relative;
					top: -10rpx;
				}
			}

			.details {
				text-align: right;
				position: relative;
				float: left;
				width: 40%;
			}
			.text {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
			}
		}

		.range {
			height: 34px;
			line-height: 34px;
			text-align: left;
		}
	}
	.mark {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff98;
	}
}
</style>
